<template>
  <div class="img-updata-body">
    <el-upload v-if="!disabled" class="avatar-uploader" action="false" list-type="picture-card" :http-request="updataImg" :show-file-list="false" :before-upload="beforeAvatarUpload" :onChange="changeFile">
      <div v-if="svgData" style="width: 100px; height: 100px" v-html="svgData"></div>
      <el-image @click.stop="" :preview-src-list="[imgUrl.indexOf('data') >= 0?imgUrl:getOpenDownloadFile(imgUrl)]" class="img-box" v-if="!svgData && imgUrl" fit="contain" :src="imgUrl.indexOf('data') >= 0?imgUrl:getOpenDownloadFile(imgUrl)">
        <div slot="error" class="el-image__error">加载失败</div>
      </el-image>
      <div v-else>
        <!-- <i class="el-icon-picture" style="color: #409eff; font-size: 50px"></i>
        <div style="color: #409eff">上传图片</div> -->
        <i class="el-icon-plus"></i>
      </div>
      <div class="btn-clear" title="清空" v-show="imgUrl" @click.stop="handleClear">
        <svg-icon icon-class="close-circle"></svg-icon>
      </div>
    </el-upload>
    <div v-else>
      <div v-if="svgData" style="width: 100px; height: 100px" v-html="svgData"></div>
      <el-image v-if="!svgData && imgUrl && !isSvg(getOpenDownloadFile(imgUrl))" @click.stop="" :preview-src-list="[imgUrl.indexOf('data') >= 0?imgUrl:getOpenDownloadFile(imgUrl)]" class="img-box" fit="contain" :src="imgUrl.indexOf('data') >= 0?imgUrl:getOpenDownloadFile(imgUrl)">
        <div slot="error" class="el-image__error">加载失败</div>
      </el-image>
    </div>
  </div>
</template>

<script>
import { openUpload, getOpenDownloadFile } from "../api/common/attachment";
import request from '@/utils/request';
export default {
  name: "imgUpdata",
  props: {
    value: {
      type: String,
    },
    relationUnid: {
      type: [String, Number],
    },
    moduleName: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data()
  {
    return {
      file: null,
      imgUrl: null,
      svgData: null
    };
  },
  created()
  {
    if (this.isSvg(this.imgUrl))
    {
      this.getSvg(this.imgUrl);
    }
  },
  watch: {
    value: {
      handler(newVal)
      {
        this.imgUrl = newVal;
      },
      immediate: true,
    },
    imgUrl: {
      handler(newVal)
      {
        this.$emit("input", newVal);
      },
    },
  },
  methods: {
    getOpenDownloadFile,
    getSvg(P_Url)
    {
      request({
        url: this.getOpenDownloadFile(P_Url),
        method: 'get'
      }).then(res =>
      {
        this.svgData = res;
      })
    },
    //是否是svg
    isSvg(P_Url)
    {
      let valueToReturn = false;
      if (P_Url && typeof P_Url == "string")
      {
        let arr = P_Url.split(".");
        if (arr.length >= 2)
        {
          if (arr[arr.length - 1] == 'svg' || arr[arr.length - 1] == 'SVG')
          {
            valueToReturn = true;
          }
        }
      }
      return valueToReturn;
    },
    /**
     * 2022-4-21 chenshuai
     * 自定义上传
     */
    updataImg()
    {
      const formData = new FormData();
      formData.append("file", this.file.raw);
      formData.append("relationUnid", this.relationUnid);
      formData.append("moduleName", this.moduleName);
      formData.append("type", 1);
      openUpload(formData, (progress) =>
      {
        console.log(progress);
      }).then((res) =>
      {
        this.imgUrl = res.result.filePath;
        if (this.isSvg(this.imgUrl))
        {
          this.getSvg(this.imgUrl);
        }
        else
        {
          this.svgData = null;
        }
        this.$nextTick(() =>
        {
          this.$emit("updateSuccess");
          this.$emit("change");
        });
      });
    },
    handleClear()
    {
      this.imgUrl = "";
      this.$emit("change");
    },
    /**
     * 上传校验
     */
    beforeAvatarUpload(file)
    {
      // const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 10;

      // if (!isJPG)
      // {
      //   this.$message.error("上传图片只能是 JPG或PNG 格式!");
      // }
      if (!isLt2M)
      {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      return isLt2M;
    },
    changeFile(file, fileList)
    {
      this.file = file;
      console.log(file);
    },
  },
};
</script>

<style lang="scss" scoped>
.img-updata-body {
  width: 100%;
  height: 100%;
}

.avatar-uploader {
  width: 100%;
  height: 100%;
  margin: 0;
  text-align: center;
  position: relative;
  // ::v-deep .el-upload {
  //   width: 100%;
  // }
  .img-box {
    width: 100%;
    height: 100%;
  }
  .btn-clear {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 24px;
  }
}

::v-deep .el-image__error {
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep.img-updata-body .el-upload--picture-card {
  width: 100%;
  height: 100%;
  line-height: 80px;
}
::v-deep .svg-icon {
  position: absolute;
}
// .img-box{
//   max-width: 80px;
// }
</style>